<!-- 首页 -->
<template>
	<view>
		<mescroll-uni ref="mescrollCardRef" height="100%" @init="mescrollInit" @down="downCallback" :up="upOption" @up="upCallback">
			<!-- <view :style="{paddingTop: CustomBar + 'px'}"></view> -->
		    <view class="user-box" v-for="(item, index) in dataList" :key="index">
				<view class="avatar-box">
					<u-avatar @click="chat(item)" size="large" :src="item.avatar"></u-avatar>
					<view class="id-card-tip" v-if="item.idCardStatus == '1'">
						<u-icon name="renzhengguanli" size="52" custom-prefix="iconfont"></u-icon>
					</view>
				</view>
		    	<view class="user-box-right">
		    		<view>
		    			<view class="user-name-box">
		    				<view class="nickname">{{item.nickName}}</view>
		    				<view class="sex-box-nv" v-if="item.sex == 1">
		    					<u-icon name="ziyuan2" custom-prefix="iconfont"></u-icon>
		    					<view class="age-text">{{item.age}}</view>
		    				</view>
		    				<view class="sex-box" v-else>
		    					<u-icon name="ziyuan3" custom-prefix="iconfont"></u-icon>
		    					<view class="age-text">{{item.age}}</view>
		    				</view>
							<view class="vip-box" v-if="item.isPay == '1'">
								<u-icon name="xianxinghuiyuan" custom-prefix="iconfont"></u-icon>
								<view class="vip-text">贵{{item.coinLevel}}</view>
							</view>
		    			</view>
		    			<view class="user-tag-box">
		    				<view class="user-tag">{{item.city}}</view>
		    			<!-- 	<view class="line"></view>
		    				<view class="user-tag">{{item.distance}}km</view> -->
		    			</view>
						<view v-if="item.albums">
							<u-album :urls="item.albums.split(',')" @preAd="preAd" :locks="item.imageLock" fontSize="mini" :multipleSize="90" :rowCount="3" :maxCount="3" :maxRow="1"></u-album>
						</view>
						<view v-else>
							<view v-if="item.signName == '' || item.signName == null ">{{item.signName}}</view>
							<view class="sign-name" v-else>{{item.signName}}</view>
						</view>
		    		</view>
		    		<view>
						<u-button size="mini" @click="addWechat(item)" v-if="item.wechatFlag">
							<u-icon name="weixin-fill" color="#19be6b" size="36"></u-icon>
						</u-button>
		    			<u-button size="mini" @click="apply(item)" v-else>
							<u-icon name="chat-fill" color="#1296db" size="36"></u-icon>
						</u-button>
		    		</view>
		    	</view>
		    </view>
		</mescroll-uni>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import MescrollMoreItemMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js";
import {mapState} from 'vuex';
export default {
	mixins: [MescrollMixin,MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
	props:{
		
	},
	data() {
		return {
			CustomBar: this.CustomBar, 
			upOption:{
				auto:false, // 不自动加载
				page: {
				 	num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
				 	size: 20 // 每页数据的数量
				},
				noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				empty:{
			        icon: '/static/mescroll-empty.png',
					tip: '~ 暂无数据 ~', // 提示
					// btnText: '去看看'
				},
				toTop: {
					right: 40,
					width: 80,
					bottom: 200,
				},
				bgColor: '#FFF',
				textColor: '#606266',
			    textNoMore:'没有更多了'
			},
			dataList: [],
		};
	},
	computed: {
		...mapState(['vuex_user','vuex_query']),
	},
	methods: {
		downCallback(mescroll) {
			mescroll.endSuccess();
			mescroll.resetUpScroll();
		},
		async upCallback(mescroll) {
			var userId = uni.getStorageSync("userId");
			this.$u.get('/system/user/getListByTopic',{
				pageNum: mescroll.num,
				pageSize: mescroll.size,
				userId: userId,
				min: this.vuex_query.min,
				max: this.vuex_query.max,
				sex: this.vuex_query.sex,
			}).then(res => {
				mescroll.endSuccess(res.rows.length);
				if (mescroll.num == 1) {
					this.dataList = res.rows;
				} else {
					this.dataList = this.dataList.concat(res.rows);
				}
			}).catch(err => {
				mescroll.endErr();
			});
		},
		query() {
			this.mescroll.resetUpScroll();
		},
		init() {
			var userId = uni.getStorageSync("userId");
			this.$u.get('/system/user/getListByOpen',{
				pageNum: this.current,
				pageSize: this.pageSize,
				userId: userId,
				lon: this.vuex_user.lon,
				lat: this.vuex_user.lat,
			}).then(res => {
				this.dataList = res.rows;
			}).catch(err => {
				
			})
		},
		chat(item) {
			this.$u.post('/wq/card/add',{
				cardUserId: item.userId,
				cardType: '0',
			}).then(res => {
				this.$u.route({
					url: 'packgeMine/pages/center/index',
					params: {
						userId: item.userId,
					}
				});
			}).catch(err => {
				
			})
		},
		apply(e) {
			this.judgeLogin((rs) => {
				if(rs.user.phonenumber == null || rs.user.phonenumber == ''){
					this.$store.commit('setPhone', true);
					return;
				}
				
				this.$u.post('/wq/card/add',{
					cardUserId: e.userId,
					cardType: '0',
				}).then(r => {
					this.$u.post('/wq/friendApply/add',{
						userId: e.userId,
					}).then(res => {
						var roomId = res.data.roomId;
						this.$u.route({
							url: 'packgeMine/pages/chat/chat',
							params: {
								roomId: roomId,
							}
						});
					});
				}).catch(err => {
					
				})
				
			});
		},
		getAmount() {
			this.$u.get('/pay/userCoin/getAmount').then(res => {
				this.$store.commit('setAmount', res.data);
			});
		},
		addApply(e) {
			this.$u.post('/wq/card/add',{
				cardUserId: e.userId,
				cardType: '0',
			}).then(r => {
				this.$u.post('/wq/friendApply/addWechat',{
					userId: e.userId,
				}).then(res => {
					this.getAmount();
					this.$u.route({
						url: 'packgeMine/pages/chat/chat',
						params: {
							roomId: res.data.roomId,
						}
					});
				});
			}).catch(err => {
				
			})
			
		},
		addVipApply(e) {
			this.$u.post('/wq/card/add',{
				cardUserId: e.userId,
				cardType: '0',
			}).then(r => {
				this.$u.post('/wq/friendApply/addVipWechat',{
					userId: e.userId,
				}).then(res => {
					this.$refs.uToast.show({
						title: '剩余'+res.wechatNum+'次',
						type: 'success',
						duration: 1000,
						url: 'packgeMine/pages/chat/chat?roomId='+res.roomId
					});
				});
			}).catch(err => {
				
			})
		},
		addWechat(item) {
			this.judgeLogin((rs) => {
				if(rs.user.phonenumber == null || rs.user.phonenumber == ''){
					this.$store.commit('setPhone', true);
					return;
				}
				
				this.judgeVipNum((res) => {
					if(res.wechatNum > 0){
						this.addVipApply(item);
					}else{
						this.addApply(item);
					}
				});
			});
		},
		subscribeMessage(tmplIds) {
			uni.requestSubscribeMessage({
				//数组，最多放三个订阅模板的ID
				tmplIds: tmplIds,
				success: function(res) {
					console.log(JSON.stringify(res));
				},
				fail: function() {
		
				},
				complete: (res) => {
					console.log(333,res)
				}
			});
		},
		preAd(run) {
			var _this = this;
			
			uni.login({
				provider: 'weixin',
				success: function(loginRes) {
					var code = loginRes.code;
					_this.$u.get('/system/config/getAdValue',{
						code: code,
						appId: _this.website.appId
					}).then(res => {
						uni.login({
							provider: 'weixin',
							success: function(e) {
								_this.openImg(e.code, res.data, res.adId, run);
							},
							fail: function() {
								
							}
						});
					});
				},
				fail: function() {
					
				}
			});
		},
		openImg(code,config,adId,run) {
			var adNum = uni.getStorageSync("adNum");
			if(adNum > 0){
				adNum = adNum - 1;
				uni.setStorageSync("adNum", adNum);
				run(true);
				return;
			}
			
			var adFlag = false;
			var content = "观看广告并点击广告下方绿色按钮后再返回，即可解锁资源";
			if("0" == config){
				run(true);
				return;
			}else if("1" == config){
				// 需要点击广告
				adFlag = false;
			}else if("2" == config){
				// 不需要点击广告
				adFlag = true;
				content = "观看广告后，即可解锁资源";
			}else if("3" == config){
				// 需要转发好友
				content = "今日观看广告次数已用完，请转发好友或者群聊，即可解锁5次资源";
			}
			
			var _this = this;
			uni.showModal({
			  title: '提示',
			  content: content,
			  success: (res) => {
			    if (res.confirm) {
					if("3" == config){
						uni.setStorageSync("adClick", false);
						uni.$off('test');
						uni.$on('test', function(res){
							if(res){
								uni.setStorageSync("adNum", 4);
								_this.$store.commit('setCash', false);
								_this.addAdLog(code, "03");
								uni.$off('test');
								run(true);
							}else{
								uni.showModal({
								  title: '您没有转发成功',
								  content: '您没有转发成功，请重新来过',
								  showCancel: false,
								  success: (res) => {
									  run(false);
								  }
								});
							}
						});
						_this.$store.commit('setCash', true);
						return;
					}
					//加载激励广告
					_this.$utils.videoAdInit(adId);
					// 在适合的场景显示插屏广告
					_this.$utils.videoAdShow()
					.then((res) => {
					  if (res) {
						var adClik = uni.getStorageSync("adClick");
						console.log("点击广告"+adClik);
						if(adClik || adFlag){
							if(adClik){
								_this.addAdLog(code, "02");
							}else{
								_this.addAdLog(code, "01");
							}
							run(true);
						}else{
							_this.addAdLog(code, "01");
							uni.showModal({
							  title: '您没有点击绿色按钮',
							  content: '您没有点击绿色按钮，请重新来过',
							  success: (res) => {
								  run(false);
							  }
							});
						}
					  } else {
						console.log('广告提前退出')
						_this.addAdLog(code, "00");
						run(false);
					  }
					})
					.catch((err) => {
						console.log('广告加载失败')
						run(false);
					});  
			    }
			  }
			});
		},
		addAdLog(code, action) {
			this.$u.post('/wq/ad/add',{
				adAction: action,
				appId: this.website.appId,
				code: code,
			}).then(res => {
				
			});
		},
	}
};
</script>
<style lang="scss" scoped>
	page {
		background-color: #fff;
	}
	.user-box {
		display: flex;
		align-items: center;
		padding: 15px;
		padding-bottom: 0;
	}
	.user-name-box {
		display: flex;
		align-items: center;
	}
	.nickname {
		font-size: 28rpx;
		margin-right: 5px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		max-width: 100px;
	}
	.sex-box {
		background-color: #2b85e4;
		display: flex;
		color: #fff;
		padding: 4rpx 10rpx;
		border-radius: 20px;
		font-size: 16rpx;
	}
	.sex-box-nv {
		background-color: #fe709f;
		display: flex;
		color: #fff;
		padding: 4rpx 10rpx;
		border-radius: 20px;
		font-size: 16rpx;
	}
	.user-tag-box {
		display: flex;
		align-items: center;
	}
	.user-tag {
		font-size: 20rpx;
		color: #82848a;
		margin: 10rpx 0;
	}
	.user-box-right {
		margin-left: 15px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex: 1;
	}
	.sign-name {
		font-size: 24rpx;
		color: #8d8d8d;
		text-overflow: ellipsis;
		width: 400rpx;
		overflow: hidden;
		white-space: nowrap;
	}
	.renzheng-box {
		display: flex;
		align-items: center;
		margin-right: 5px;
	}
	.line {
		float:left;
		width: 1px;
		height: 16rpx; 
		background: #e5e5e5;
		margin: 0 5px;
	}
	.vip-box {
		color: #fff;
		margin-left: 5px;
		font-size: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #f7ce05;
		padding: 4rpx 8rpx;
		border-radius: 20px;
	}
	.vip-text {
		font-size: 16rpx;
		line-height: 2px;
	}
	.loadmore-box {
		padding: 15px 0;
		padding-bottom: 140rpx;
	}
	.avatar-box {
		position: relative;
	}
	.id-card-tip {
		position: absolute;
		right: 6px;
		top: 90rpx;
		background-color: #fff;
		width: 20rpx;
		height: 20rpx;
		color: #f7ce05;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
